<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Show Example</title>
		
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js "></script>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
		
		
        <STYLE>
            .toggler {
                width: 500px;
                height: 200px;
            }
            
            #button {
                padding: .5em 1em;
                text-decoration: none;
            }
            
            #effect {
                width: 240px;
                height: 135px;
                padding: 0.4em;
                position: relative;
            }
            
            #effect h3 {
                margin: 0;
                padding: 0.4em;
                text-align: center;
            }
        </STYLE>
        <SCRIPT>
            $(function(){
                // run the currently selected effect
                function runEffect(){
                    // get effect type from 
                    var selectedEffect = $("#effectTypes").val();
                    
                    // most effect types need no options passed by default
                    var options = {};
                    // some effects have required parameters
                    if (selectedEffect === "scale") {
                        options = {
                            percent: 100
                        };
                    }
                    else 
                        if (selectedEffect === "size") {
                            options = {
                                to: {
                                    width: 280,
                                    height: 185
                                }
                            };
                        }
                    
                    // run the effect
                    $("#effect").show(selectedEffect, options, 500, callback);
                };
                
                //callback function to bring a hidden box back
                function callback(){
                    setTimeout(function(){
                        $("#effect:visible").removeAttr("style").fadeOut();
                    }, 1000);
                };
                
                // set effect from select menu value
                $("#button").click(function(){
                    runEffect();
                    return false;
                });
                
                $("#effect").hide();
            });
        </SCRIPT>
    </head>
    <body>
        <DIV class=demo>
            <DIV class=toggler>
                <DIV id=effect class="ui-widget-content ui-corner-all">
                    <H3 class="ui-widget-header ui-corner-all">Show</H3>
                    <P>
                        Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. 
                    </P>
                </DIV>
            </DIV>
            <SELECT id=effectTypes name=effects>
                <OPTION selected value=blind>Blind</OPTION>
                <OPTION value=bounce>Bounce</OPTION>
                <OPTION value=clip>Clip</OPTION>
                <OPTION value=drop>Drop</OPTION>
                <OPTION value=explode>Explode</OPTION>
                <OPTION value=fold>Fold</OPTION>
                <OPTION value=highlight>Highlight</OPTION>
                <OPTION value=puff>Puff</OPTION>
                <OPTION value=pulsate>Pulsate</OPTION>
                <OPTION value=scale>Scale</OPTION>
                <OPTION value=shake>Shake</OPTION>
                <OPTION value=size>Size</OPTION>
                <OPTION value=slide>Slide</OPTION>
            </SELECT>
            <A id=button class="ui-state-default ui-corner-all" href="#">Run Effect</A>
        </DIV>
        <!-- End demo -->
        <DIV style="DISPLAY: none" class=demo-description>
            <P>
                Click the button above to preview the effect.
            </P>
        </DIV>
        <!-- End demo-description -->
    </body>
</html>
